import AMapJS from "amap-js";
import { Input, message, Row, Col, Button } from "antd";
import React, { useState, useEffect } from "react";
import { MapInfo } from "../../utils/MapInfo";
import "./style.css";

export default function SelectAddress(props) {
  //   map = null;

  const [map, setmap] = useState(null);
  const [location, setlocation] = useState({
    lnglat: [],
    address: ""
  });


  useEffect(() => {
    // console.log(props.data);
    if (map === null) mapInit();
    return () => {
      cleanUp();
    };
  }, []);

  const mapInit = () => {
    const aMapJSAPILoader = new AMapJS.AMapJSAPILoader({
      v: MapInfo.version,
      key: MapInfo.key
    });

    const aMapUILoader = new AMapJS.AMapUILoader({
      v: MapInfo.UIVersion // UI组件库版本号
    });

    aMapJSAPILoader.load().then(AMap => {
      aMapUILoader.load().then(initAMapUI => {
        const AMapUI = initAMapUI();
        console.log(props.data);

        const map = new AMap.Map("map", {
          expandZoomRange: true,
          zooms: [16, 20], //级别
          center: props.data.lnglat //中心点坐标
          //   scrollWheel: false
        });

        const marker = new AMap.Marker({
          //eslint-disable-next-line
          position: props.data.lnglat,
          // content: markerContent,
          animation: "AMAP_ANIMATION_DROP"
        });

        map.add(marker);

        AMap.plugin("AMap.Geocoder", () => {
          const geocoder = new AMap.Geocoder({
            // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
            city: "成都"
          });

          geocoder.getLocation("成都市天府广场", function(status, result) {
            if (status === "complete" && result.info === "OK") {
              // result中对应详细地理坐标信息
            }
          });

          map.on("click", e => {
            // console.log(e.target);
            marker.setPosition(new AMap.LngLat(e.lnglat.lng, e.lnglat.lat));
            // setlocation({
            //   lnglat: [e.lnglat.lng, e.lnglat.lat],
            //   address: "123123"
            // });
            geocoder.getAddress(
              [e.lnglat.lng, e.lnglat.lat],
              (status, result) => {
                if (status === "complete" && result.regeocode) {
                  var address = result.regeocode.formattedAddress;
                  // document.getElementById("address").value = address;
                  setlocation({
                    lnglat: [e.lnglat.lng, e.lnglat.lat],
                    address: address
                  });
                } else {
                  message.destroy();
                  message.error("出错了，请重试！");
                }
              }
            );
          });

          // 使用geocoder做地理/逆地理编码
        });

        AMap.plugin("AMap.Autocomplete", () => {
          // 实例化Autocomplete
          var autoOptions = {
            // input 为绑定输入提示功能的input的DOM ID
            input: "search",
            city: "成都"
          };
          const search = new AMap.Autocomplete(autoOptions);
          // 无需再手动执行search方法，autoComplete会根据传入input对应的DOM动态触发search

          search.on("select", data => {
            // console.log(data);

            if (data.poi.location.lng === undefined) {
              message.destroy();
              message.error("请输入详细地址来查询！");
              return;
            }
            map.setCenter(
              new AMap.LngLat(data.poi.location.lng, data.poi.location.lat)
            );
            marker.setPosition(
              new AMap.LngLat(data.poi.location.lng, data.poi.location.lat)
            );

            setlocation({
              lnglat: [data.poi.location.lng, data.poi.location.lat],
              address: data.poi.district + data.poi.address + data.poi.name
            });
          });
        });

        // positionPicker.start();

        setmap(map);
      });
    });
  };

  //清空地图
  const cleanUp = () => {
    if (map !== null) map.destroy();
  };

  const handleClick = () => {
    props.handleOk(location);
  };

  // console.log(location);

  return (
    <div style={{ width: "100%", height: "510px" }}>
      <label>输入地址:</label>

      <Input id="search" style={{ marginBottom: "1rem" }} />

      <div
        id={"map"}
        style={{
          width: "100%",
          height: "350px"
        }}
      ></div>
      <div>
      <label>地址:</label>
      <span>{location.address}</span>

      <br />
      <label>经纬度:</label>
      <span>
        {location.lnglat.length > 0
          ? location.lnglat[0] + "," + location.lnglat[1]
          : ""}
      </span></div>

      <Button
        onClick={handleClick}
        type="primary"
        style={{ float: "right" }}
        disabled={location.lnglat.length < 2}
      >
        确定
      </Button>
      <div style={{clear:'both'}}></div>
    </div>
  );
}
